<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="layui/css/layui.css"/>
  <script type="text/javascript" src="layui/layui.js"></script>
  <script type="text/html" id="allocate">
    <div style="float:right">
      <button class="layui-btn layui-btn-sm" lay-event="insert"><i
              class="layui-icon">&#xe654;</i>新增</button>
      <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
    </div>
      <div class="layui-inline" style="position: relative;left: 30px;">
        <label class="layui-form-label" style="width: 90px">调拨日期</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" id="allocateDate" name="allocateDate" placeholder="开户日期">
        </div>
      </div>
    <div class="layui-inline" style="position: relative;left: 30px;">
     <label class="layui-form-label" style="width: 90px">调拨类型</label>
      <div class="layui-input-inline">
        <select name="allocateType" id="allocateType" class="layui-input">
          <option value="0"></option>
          <option value="1">存款利息</option>
          <option value="2">申购赎回清算款</option>
          <option value="3">买卖交易清算款</option>
          <option value="4">债券利息</option>
          <option value="5">存款业务</option>
          <option value="6">俩费</option>
        </select>
      </div>
    </div>
    <div class="layui-inline"style="position: relative;left: 30px;" >
      <label class="layui-form-label" style="width: 90px">调拨方向</label>
      <div class="layui-input-inline">
        <select id="allocateFlow" name="allocateFlow" class="layui-input">
          <option value="0"></option>
          <option value="1">流入</option>
          <option value="2">流出</option>
        </select>
      </div>
    </div>
    <div class="layui-inline layui-show-xs-block">
      <button class="layui-btn layui-btn-primary" lay-event="search" lay-submit="search" lay-filter="search"><i class="layui-icon">&#xe615;</i>搜索</button>
    </div>
  </script>

  <script type="text/javascript" src="layui/lay/modules/tableSelect.js"></script>
  <script type="text/javascript">
    layui.use(['table','form','laydate','tableSelect', 'layer'], function(){
      var table = layui.table;//得到layui 的table组件
      var $=layui.jquery;
      var form=layui.form;
      var laydate = layui.laydate;
      var layer = layui.layer;
      tableSelect = layui.tableSelect,
      //表格的渲染  给表格加样式 加数据
      table.render({
        //指定原始 table 容器的选择器或 DOM，方法渲染方式必填
        elem: '#MoneyAllocate',
        //url 表格的数据来源  从数据库查询
        url:'MoneyAllocatePage',
        toolbar: '#allocate',
        page: true,
        height:'full-20',
        limits:[5,8,10,15],
        cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        cols: [[
           {type: 'checkbox', fixed: 'left'}
          ,{field:'moneyAllocateId', title: '资金调拨编号', sort: true}
          ,{field:'fundId', title: '基金编号',sort: true} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
          ,{field:'cashId', title: '现金编号', sort: true}
          ,{field:'allocateMoney', title: '调拨金额', sort: true}
          ,{field:'allocateType', title: '调拨类型',templet:function (item){
              if (item.allocateType == 1){
                return '存款利息'
              }else if (item.allocateType == 2){
                return '申购赎回清算款'
              }else if (item.allocateType == 3){
                return '买卖交易清算款'
              }else if (item.allocateType == 4){
                return '债券利息'
              }else if (item.allocateType == 5){
                return '存款业务'
              }else if (item.allocateType == 6){
                return '两费'
              }
            }}
          ,{field:'allocateFlow', title: '调拨方向',templet: function (item){
              if (item.allocateFlow==1){
                return '流入'
              }else{
                return '流出'
              }
            }}
          ,{field:'businessId', title: '业务编号', sort: true}
          ,{field:'allocateDate', title: '调拨日期', sort: true}
          ,{field:'businessDate', title: '业务日期', sort: true}
          ,{field:'moneyAllocateBeiZhu', title: '备注', sort: true}
          ,{fixed: 'right', width: 165, align:'center', toolbar: '#cashDemo'}
        ]]




      });

      table.on('toolbar(MoneyAllocate)',function (obj) {
        //根据事件对象 来判定点击的是哪一个案例
        if(obj.event=='insert'){
          layer.open({
            type:1,
            area:['1000px','550px'],
            content: $("#MoneyAllocateAdd")
          });

        }else if(obj.event=='deleteAll'){
          alert('批量删除');

          var checkStatus = table.checkStatus('MoneyAllocate');
          if(checkStatus.data.length==0){
            parent.layer.msg('请先选择要删除的数据行！', {icon: 2});
            return ;
          }
          var ids = "";
          for(var i=0;i<checkStatus.data.length;i++){
            ids += checkStatus.data[i].moneyAllocateId+",";
          }
          alert(ids+"数据长度");

          parent.layer.msg('删除中...', {icon: 16,shade: 0.3,time:3000});
          $.post('moneyAllocateDelete',
                  {'ids':ids},
                  function(data){
                    var  a = data.toString();
                    layer.closeAll('loading');
                    if(a.charAt(9)==1){
                      parent.layer.msg('删除成功！', {icon: 1,time:2000,shade:0.2});
                      location.reload(true);
                    }else{
                      parent.layer.msg('删除失败！', {icon: 2,time:3000,shade:0.2});
                    }
                  }
          );



        }else if(obj.event=='search'){
          var allocateType=$('#allocateType').val();
          var allocateFlow=$('#allocateFlow').val();
          var allocateDate=$('#allocateDate').val();

          table.reload('MoneyAllocate', {
            method: 'post',
            page: {
              curr: 1
            },
            where:{
              'allocateType':allocateType,
              'allocateFlow':allocateFlow,
              'allocateDate':allocateDate
            }
          });

        }

      });
      //给增加的form绑定提交事件
      form.on('submit(MoneyAllocateForm)',function () {
        //发送ajax请求到 服务器，
        //得到表单的所有数据
        var formData= form.val("MoneyAllocateForm");
        $.post(
                "MoneyAllocateAdd",
                formData,
                function(msg) {
                  //重新刷新表格
                  //给予提示信息，增加成功
                  alert(msg);

                });
        let index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
      });

      /*修改*/
      table.on('tool(MoneyAllocate)',function (obj) {
        switch (obj.event) {
          case "edit":
            //得到选中行的数据
            var data=obj.data;
            //JSON.stringify(data)  拼接成JSON格式的字符串
            var userObj=$.parseJSON(JSON.stringify(data));
            //弹出一个修改的窗口
            form.val("moneyAllocateUpdateFrom",userObj);
            layer.open({
              type:1, //iframe 内嵌窗口
              area:['1000px','550px'],
              content: $("#moneyAllocateUpdateContent")
            });

            break;
          case "del":
            layer.confirm('确定要删除吗？',function (index){
              layer.close(index);
              var data=obj.data;
              $.ajax({
                url:"moneyAllocateDelete",
                type:"post",
                data:"ids="+data.moneyAllocateId,
                dataType:"text",
                contentType:"application/x-www-form-urlencoded",
              });
              //重新刷新表格
              table.reload('MoneyAllocate');
            });
            break;
        }
      });


      //给修改的form绑定提交事件
      form.on('submit(moneyAllocateUpdateFrom)',function () {
        //发送ajax请求到 服务器，
        //得到表单的所有数据
        var formData= form.val("moneyAllocateUpdateFrom");
        $.post(
                "moneyAllocateUpdate",
                formData,
                function(msg) {
                  //重新刷新表格
                  //给予提示信息，增加成功
                  alert(msg);
                });
      });


      laydate.render({
        elem: '#test1',

      });laydate.render({
        elem: '#test2',

      });laydate.render({
        elem: '#test3',

      });laydate.render({
        elem: '#test4',
      });laydate.render({
        elem:'#allocateDate'
      });
        tableSelect.render({
      //下拉表格 的渲染
          elem: '#cashIds',//渲染表格 与 文本框绑定
          searchKey:'cashIds',//后端根据这个名称得到下拉表格中文本框的值
          checkedKey:'cashId',
          table: {
            url: 'pageCash',//数据接口
            cols: [[
              {type: 'radio'},
              {field:'cashId', title: '现金账户', sort: true}
              ,{field:'bankAccount', title: '银行账号',sort: true} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
              ,{field:'accounName', title: '账户名称', sort: true}
            ]]
          },
          //回调函数
          done: function (elem, data) {
            var Name='';
            //遍历选中的数据
            $.each(data.data,function (index,item) {
              Name=item.accounName;
              $("#accounName").val(item.accounName);
              alert(item.cashId);
              $('#cashId').val(item.cashId);

            });
            elem.val(Name);//给输入框里显示的值赋值
          }
        })
    });
  </script>
</head>
<body>



<table id="MoneyAllocate" lay-filter="MoneyAllocate"></table>
<!--表格最后一列的操作按钮的工具栏-->
<div style="display: none;" id="cashDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit"><i
          class="layui-icon">&#xe642;</i>编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
          class="layui-icon">&#xe640;</i>删除</a>

</div>
<!--增加-->
<!---->
<!--  background-color: #000; -->
<div id="MoneyAllocateAdd"
     style="display: none; height: 100%; width: 950px; text-align: center; ">
  <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用  background-color: #ffff00; background-color: #0a6aa1;-->
  <form id="MoneyAllocateForm" lay-filter="MoneyAllocateForm"
        class="layui-form layui-form-pane"
        style="margin: 30px auto; display: inline-block; width:100%;">
    <div style=" Float: left; width: 40%;margin-left:10%" >
      <!--<div class="layui-form-item" style="text-align: center;">
        &lt;!&ndash;标签&ndash;&gt;
        <label class="layui-form-label">资金调拨编号</label>
        <div class="layui-input-inline">
          <input type="text" name="moneyAllocateId" lay-verify="required"
                 autocomplete="off" placeholder="资金调拨编号" class="layui-input">
        </div>
      </div>-->
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">基金编号</label>
        <div class="layui-input-inline">
          <input type="text" name="fundId" id lay-verify="required"
                 autocomplete="off" placeholder="基金编号" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">现金账户</label>
        <div class="layui-input-inline">
          <input type="text" name="cashId" lay-verify="required"
                 autocomplete="off" placeholder="现金账户 " id="cashIds" class="layui-input">
          <input type="hidden" id="cashId" name="cashIdk">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <!--标签-->
        <label class="layui-form-label">调拨金额</label>
        <div class="layui-input-inline">
          <input type="text" name="allocateMoney" lay-verify="required"
                 autocomplete="off" placeholder="调拨金额" class="layui-input">
        </div>
      </div>


      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">调拨方向</label>
        <div class="layui-input-inline">
          <input type="radio" name="allocateFlow" value="1" size="20px"  >流入
          <input type="radio" name="allocateFlow" value="-1"  checked="checked">流出
        </div>
      </div>
    </div>
    <!--background-color: #007DDB;-->
    <div style=" Float: left; width: 40%; margin-left:10%">
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">调拨类型</label>
        <div class="layui-input-inline">
          <select name="allocateType" class="layui-input">
            <option value=""></option>
            <option value="1">存款利息</option>
            <option value="2">申购赎回清算款</option>
            <option value="3">买卖交易清算款</option>
            <option value="4">债券利息</option>
            <option value="5">存款业务</option>
            <option value="6">俩费</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">业务编号</label>
        <div class="layui-input-inline">
          <input type="text" name="businessId" lay-verify="required"
                 autocomplete="off" placeholder="业务编号" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">调拨日期</label>
        <div class="layui-input-inline">
          <input type="text" name="allocateDate" class="layui-input" id="test1" placeholder="开户日期">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">业务日期</label>
        <div class="layui-input-inline">
          <input type="text" name="businessDate" class="layui-input" id="test2" placeholder="开户日期">
        </div>
      </div>


      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
          <input type="text" name="moneyAllocateBeiZhu" lay-verify="required"
                 autocomplete="off" placeholder="备注" class="layui-input">
        </div>
      </div>
    </div>
    <div style="position: relative; clear: both;">
      <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
      <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
        <i class="layui-icon">&#x1005;</i>添加
      </button>
      <button class="layui-btn layui-bg-red cancel" type="button">
        <i class="layui-icon">&#x1006;</i>取消
      </button>
    </div>
  </form>
</div>
<!-- 修改-->
<div id="moneyAllocateUpdateContent" style="display: none; height: 100%; height: 100%; text-align: center;">
  <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用 background-color: #ffff00; background-color: #0a6aa1;-->
  <form id="moneyAllocateUpdateFrom" lay-filter="moneyAllocateUpdateFrom"
        class="layui-form layui-form-pane"
        style="margin: 30px auto; display: inline-block; width:100%;">
    <div style=" Float: left; width: 40%; margin-left:10%">
      <div class="layui-form-item" style="text-align: center;">
        <!--标签-->
        <label class="layui-form-label">资金调拨编号</label>
        <div class="layui-input-inline">
          <input type="text" name="moneyAllocateId" lay-verify="required"
                 autocomplete="off" placeholder="资金调拨id" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">基金编号</label>
        <div class="layui-input-inline">
          <input type="text" name="fundId" lay-verify="required"
                 autocomplete="off" placeholder="基金编号" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">现金编号</label>
        <div class="layui-input-inline">
          <input type="text" name="cashId" lay-verify="required"
                 autocomplete="off" placeholder="现金ID " class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <!--标签-->
        <label class="layui-form-label">调拨金额</label>
        <div class="layui-input-inline">
          <input type="text" name="allocateMoney" lay-verify="required"
                 autocomplete="off" placeholder="调拨金额" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">调拨方向</label>
        <div class="layui-input-inline">
          <input type="radio" name="allocateFlow" value="1" size="20px"  >流入
          <input type="radio" name="allocateFlow" value="-1"  checked="checked">流出

        </div>
      </div>

    </div>
    <!--background-color: #007DDB;-->
    <div style=" Float: left; width: 40%; margin-left:10%">
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">调拨类型</label>
        <div class="layui-input-inline">
          <select name="allocateType" class="layui-input">
            <option value=""></option>
            <option value="1">存款利息</option>
            <option value="2">申购赎回清算款</option>
            <option value="3">买卖交易清算款</option>
            <option value="4">债券利息</option>
            <option value="5">存款业务</option>
            <option value="6">俩费</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">业务编号</label>
        <div class="layui-input-inline">
          <input type="text" name="businessId" lay-verify="required"
                 autocomplete="off" placeholder="业务编号" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">调拨日期</label>
        <div class="layui-input-inline">
          <input type="text" name="allocateDate" class="layui-input" id="test3" placeholder="开户日期">
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">业务日期</label>
        <div class="layui-input-inline">
          <input type="text" name="businessDate" class="layui-input" id="test4" placeholder="开户日期">
        </div>
      </div>


      <div class="layui-form-item" style="text-align: center;">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
          <input type="text" name="moneyAllocateBeiZhu" lay-verify="required"
                 autocomplete="off" placeholder="备注" class="layui-input">
        </div>
      </div>
    </div>
    <div style="position: relative; clear: both;">
      <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
      <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
        <i class="layui-icon">&#x1005;</i>添加
      </button>
      <button class="layui-btn layui-bg-red cancel" type="button">
        <i class="layui-icon">&#x1006;</i>取消
      </button>
    </div>
  </form>
</div>
</body>


</html>